<template>
    <div class="wrap">
        <p class="closeTime">{{close}}</p>
        <div class="greenWrap">
            <h2>{{greet}}</h2>
            <div class="addressWrap">
                <p>派送至 <span>{{userAddress}}</span><i></i></p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'myheader',
    data() {
        return {
            userAddress: '尚文创业城',//用户配送地址--小区
            close: this.closeTime,//营业时间
            greet: this.greetings//问候语--早上好、中午好、晚上好
        }
    },
    props: {
        closeTime: {
            type: String,
            default: '最晚营业至21:00'
        },
        greetings: {
            type: String,
            default: '晚上好'
        }
    },
}
</script>
<style lang="less" scoped>
.wrap {
    padding: 40px;
    .closeTime {
        margin-bottom: 10px;
        color: #919191;
    }
    .greenWrap {
        display: flex;
        justify-content: space-between;
        h2 {
            font-size: 40px;
        }
        .addressWrap {
            align-self: flex-end;
            p {
                padding: 10px 18px;
                border-radius: 50px;
                background: #e5e8e9;
                color: #4d4e4e;
                span {
                    color: #414242;
                    font-weight: bold;
                }
                i{
                    width:0;
                    height:0;
                    margin-left:10px;
                    margin-right:-10px;
                    display:inline-block;
                    border-top:8px solid transparent;
                    border-left:10px solid #818686;
                    border-right:10px solid transparent;
                    border-bottom:8px solid transparent;
                }
            }
        }
    }
}
</style>
